
body{
    /* background-color: #AAAAAA; */
    padding-top: 2em;
}

/* gauge-panel-1 */
#gauge-panel-text{
    border: solid 0.25em #FFFFFF;
    width: 8em;
    height: 1.5em;
    border-radius: 0.5em;
    font-size: 1.3em;
    position: absolute; top: 1.2em; left: 2em; right: 0;
    background-color: #FFFFFF;
    text-align: center;
    color: #AAAAAA;
    font-family: 'Consolas', sans-serif;
}
#gauge-panel{
    border: solid 0.25em #EBEBEB;
    width: 80em;
    height: 10em;
    border-radius: 0.5em;
    padding-top: 2em;
    padding-bottom: 2em;

}

.gauge-canvas{
    width: 300px;
    height: 150px;
}
#gauge-1-text{
    border: solid 0.25em #EBEBEB;
    border-radius: 0.2em;
    width: 5em;
    color:#67B7DC;
    position: absolute; top: 6.5em; left: 11.6em; right: 0;
    font-family: 'Consolas', sans-serif;
    font-size: 1em;
    
}

#gauge-1-unit{
    background: #EBEBEB;
    text-align: right;
}


#gauge-2-text{
    border: solid 0.25em #EBEBEB;
    border-radius: 0.2em;
    width: 5em;
    color:#6794DC;
    position: absolute; top: 6.5em; left: 30.6em; right: 0;
    font-family: 'Consolas', sans-serif;
    font-size: 1em;
}

#gauge-2-unit{
    background: #EBEBEB;
    text-align: right;
}

#gauge-3-1{
    position: absolute; top: 4.76em; left: 38.84em; right: 0;
}

#gauge-3-2{
    position: absolute; top: 4.76em; left: 38.8em; right: 0;
}

#gauge-3-desc{
    color: #CBCBCB;
    position: absolute; top: 5.96em; left: 86.7em; right: 0;
    font-size: 0.5em;
    font-family: 'Consolas', sans-serif;
    width:120px;
    transform:rotate(-50deg);
    -ms-transform:rotate(-50deg); /* IE 9 */
    -webkit-transform:rotate(-50deg); /* Safari and Chrome */
}
#gauge-3-1-desc{
    color: #CBCBCB;
    position: absolute; top: 6.9em; left: 87.84em; right: 0;
    font-size: 0.5em;
    font-family: 'Consolas', sans-serif;
    width:120px;
    transform:rotate(-50deg);
    -ms-transform:rotate(-50deg); /* IE 9 */
    -webkit-transform:rotate(-50deg); /* Safari and Chrome */
}
#gauge-3-2-desc{
    color: #CBCBCB;
    position: absolute; top: 7.8em; left: 89em; right: 0;
    font-size: 0.5em;
    font-family: 'Consolas', sans-serif;
    width:120px;
    transform:rotate(-50deg);
    -ms-transform:rotate(-50deg); /* IE 9 */
    -webkit-transform:rotate(-50deg); /* Safari and Chrome */
}

#gauge-3-text{
    border: solid 0.25em #EBEBEB;
    border-radius: 0.2em;
    width: 5em;
    color:#6771DC;
    position: absolute; top: 6.5em; left: 49.6em; right: 0;
    font-family: 'Consolas', sans-serif;
    font-size: 1em;
}

#gauge-3-unit{
    background: #EBEBEB;
    text-align: right;
}


#gauge-4-text{
    border: solid 0.25em #EBEBEB;
    border-radius: 0.2em;
    width: 5em;
    color:#C767DC;
    position: absolute; top: 6.5em; left: 68.6em; right: 0;
    font-family: 'Consolas', sans-serif;
    font-size: 1em;
}

#gauge-4-unit{
    background: #EBEBEB;
    text-align: right;
}

/* gauge panel 2 */
#gauge-panel-text-2{
    border: solid 0.25em #FFFFFF;
    width: 7em;
    height: 1.5em;
    border-radius: 0.5em;
    font-size: 1.3em;
    margin-top: 0em;
    margin-left: 1em;
    background-color: #FFFFFF;
    text-align: center;
    color: #AAAAAA;
}
#gauge-panel-2{
    border: solid 0.25em #EBEBEB;
    width: 80em;
    height: 10em;
    border-radius: 0.5em;
    padding-top: 2em;
    padding-bottom: 2em;


}

#gauge-5-text{
    border: solid 0.25em #EBEBEB;
    border-radius: 0.2em;
    width: 5em;
    color:#67B7DC;
    position: absolute; top: 19em; left: 11.6em; right: 0;
    font-family: 'Consolas', sans-serif;
    font-size: 1em;
    
}

#gauge-5-unit{
    background: #EBEBEB;
    text-align: right;
}



#gauge-6-text{
    border: solid 0.25em #EBEBEB;
    border-radius: 0.2em;
    width: 5em;
    color:#6794DC;
    position: absolute; top: 19em; left: 30.6em; right: 0;
    font-family: 'Consolas', sans-serif;
    font-size: 1em;
}

#gauge-6-unit{
    background: #EBEBEB;
    text-align: right;
}


#gauge-7-text{
    border: solid 0.25em #EBEBEB;
    border-radius: 0.2em;
    width: 5em;
    color:#6771DC;
    position: absolute; top: 19em; left: 49.6em; right: 0;
    font-family: 'Consolas', sans-serif;
    font-size: 1em;
}

#gauge-7-unit{
    background: #EBEBEB;
    text-align: right;
}


#gauge-8-text{
    border: solid 0.25em #EBEBEB;
    border-radius: 0.2em;
    width: 5em;
    color:#8067DC;
    position: absolute; top: 19em; left: 68.6em; right: 0;
    font-family: 'Consolas', sans-serif;
    font-size: 1em;
}

#gauge-8-unit{
    background: #EBEBEB;
    text-align: right;
}



/* chart panel */


#chart-panel-text{
    border: solid 0.25em #FFFFFF;
    width: 7em;
    height: 1.5em;
    border-radius: 0.5em;
    font-size: 1.3em;
    position: absolute; top: 13.8em; left: 2em; right: 0;
    background-color: #FFFFFF;
    text-align: center;
    color: #AAAAAA;
    font-family: 'Consolas', sans-serif;
}
#chart-panel{
    border: solid 0.25em #EBEBEB;
    margin-top: 2em;
    width: 80em;
    height: 40em;
    border-radius: 0.5em;
}

#chart-panel-inner{
    padding-left:2em;
    padding-top:2em;
    width: 74em;
    height: 42em;
}

/* info panel */

#info-panel-text{
    border: solid 0.25em #FFFFFF;
    width: 7em;
    height: 1.5em;
    border-radius: 0.5em;
    font-size: 1.3em;
    position: absolute; top: 46.6em; left: 2em; right: 0;
    font-family: 'Consolas', sans-serif;
    background-color: #FFFFFF;
    text-align: center;
    color: #AAAAAA;
}

#info-panel{
    border: solid 0.25em #EBEBEB;
    width: 80em;
    height: 10em;
    margin-top: 2em;
    padding-top: 2em;
    border-radius: 0.5em;
    overflow: scroll;
}

#info-panel::-webkit-scrollbar {
    width: 0.2em;     
    height: 0.2em;
}

#info-panel::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 0.2em;
    background: #AAAAAA;
}

#info-panel::-webkit-scrollbar-track {
    border-radius: 0.2em;
    background: #FFFFFF;
}

#log{
    font-family: 'Consolas', sans-serif;
}

.logRemoteAddress{
    border-top-left-radius:0.25em;
    border-bottom-left-radius:0.25em;
    width: 21em;
    text-align: center;
    float: left;
}

.logBits{
    width: 14em;
    text-align: center;
    float: left;
}
.logConn{
    width: 14em;
    text-align: center;
    float: left;
}
.logPkt{
    width: 14em;
    text-align: center;
    float: left;
}
.logLatency{
    border-top-right-radius:0.25em;
    border-bottom-right-radius:0.25em;
    width: 14em;
    text-align: center;
    float: left;
}



#footer{
    height: 4em;
    padding-top: 2em;
    text-align: center;
    font-size: 0.5em;
    font-family: 'Consolas', sans-serif;


}

#footer a {
    text-decoration:none;
    color: #6794DC;
    font-family: 'Consolas', sans-serif;
    font-size: 0.5em;
    
}

#footer a:hover {
    text-decoration:none;
    color: #C767DC;
    font-family: 'Consolas', sans-serif;

}